//公共菜单栏组件
function left_menu(){
    return `
    <div style="width: 200px;background-color: cornsilk;height: calc(100% - 30px);float: left">
        <style>
            li{
            list-style-type: none;
        }
        /* 示例样式 */
#show-list {
  background-color: #4CAF50; /* 绿色背景 */
  color: white; /* 白色文字 */
  padding: 10px 20px; /* 内边距 */
  border: none; /* 去除边框 */
  cursor: pointer; /* 鼠标指针样式 */
}

#list {
  list-style-type: none; /* 去除列表项的默认样式 */
  padding: 0; /* 去除列表项的内边距 */
  margin: 0; /* 去除列表的外边距 */
  background-color: #f9f9f9; /* 背景颜色 */
  border: 1px solid #ddd; /* 边框 */
  border-radius: 4px; /* 边框圆角 */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 阴影效果 */
  position: absolute; /* 绝对定位 */
  width: 200px; /* 宽度 */
  left: -200px; /* 初始位置在左侧隐藏 */
  top: 50px; /* 顶部距离 */
}

#list.show {
  left: 10px; /* 显示时移动到右侧 */
}
        </style>
        <span>客户管理</span><br>
        <span>类型管理</span><br>
        <span><a href="/admin/foods.html" style="color: red">食品管理</a></span><br>
        <div id="show-list" onclick="document.getElementById('list').style.display='block'">数据分析</div>
        <ul id="list" style="display: none">
                <li><a href="/admin/foods-num.html">食品实时库存柱状图</a></li>
                <li><a href="/admin/foods-sale-price.html">食品销售额饼图</a></li>
                <li> <a href="/admin/orders-num-group-by-hour.html">小时订单实时折线图</a></li>
                <li> <a href="/admin/orders-typesId-day.html">每天不同类型销售图</a></li>
                <li> <a href="/admin/orders-typesId-hour.html">小时不同类型打包图</a></li>
                <li><a href="/admin/summation-data.html">数据汇总大屏</a></li>
            </ul>
        <br>
        <span>系统日志</span><br>
        <span>推荐参数</span><br>
    </div>
    <script>
    
</script>
    `
}